<template>
  <div :class="['wc_progress_wapper',wapper_style]">
    <div class="bar wc_progress_total"></div>
    <div class="bar wc_progress_actived" :style="{ width: percent + '%' }"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    percent: {
      default: 0,
      type: Number | String
    },
    wapper_style: {
      default: "",
      type: String
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.wc_progress_wapper {
  position: relative;
  width: 100%;
  height: 16px;
  background: #dadada;
  border-radius: 100px;
  overflow: hidden;

  .bar {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
  }

  .wc_progress_actived {
    width: 0;
    background: #ff5256;
  }
}
</style>